<template>
  <page-layout>
    <a-row :gutter="[10, 10]">
      <!-- 查询表单 -->
      <a-col :span="24">
        <a-card>
          <pro-query
            :searchParam="searchParam"
            @on-search="search"
          ></pro-query>
        </a-card>
      </a-col>
      <!-- 岗位列表 -->
      <a-col :span="24">
        <a-card>
          <pro-table
            ref="tableRef"
            :fetch="fetch"
            :columns="columns"
            :operate="operate"
            :param="state.param"
            :pagination="pagination"
          >
          </pro-table>
        </a-card>
      </a-col>
    </a-row>
    <UseApply :visible="state.visibleApply" @close="closeApply" :record="state.recordApply"></UseApply>
    <useReturn :visible="state.visibleReturn" @close="closeReturn" :record="state.recordReturn"></useReturn>
  </page-layout>
</template>

<script>
import {reactive, ref} from 'vue';
import {page} from "@/api/module/application";
import {message} from "ant-design-vue";
import UseApply from "@/view/laboratory/modal/useApply";
import useReturn from "@/view/laboratory/modal/useReturn";

export default {
  components: {
    UseApply,
    useReturn,
  },
  setup() {
    const tableRef = ref();

    /// 判断申请状态
    const converFormat = [
      {label: '待审核', value: '0'},
      {label: '使用中', value: '1'},
      {label: '已归还', value: '2'},
      {label: '已拒绝', value: '3'}
    ]
    const columns = [
      {dataIndex: "id", key: "id", title: "ID"},
      {dataIndex: "goodsName", key: "goodsName", title: "物品名称"},
      {dataIndex: "applicationNumber", key: "applicationNumber", title: "申请数量"},
      {dataIndex: "application", key: "application", title: "申请用途"},
      {dataIndex: "status", key: "status", title: "申请状态", conver: converFormat},
      {dataIndex: "nickname", key: "nickname", title: "申请人"},
      {dataIndex: "applicationTime", key: "applicationTime", title: "申请时间"},
    ];


    /// 数据来源
    const fetch = async (param) => {
      var response = await page(param);
      return {
        total: response.data.total,
        data: response.data.record,
      };
    };

    /// 行操作
    const operate = [
      {
        label: "审核", event: function (record) {

          if (record.aa == 0) {
            state.visibleApply = true,
              state.recordApply = record
          } else if (record.aa == 1) {
            state.visibleReturn = true,
              state.recordReturn = record
          } else if (record.aa == 2) {
            message.error("该请求已完成，请重新发起！！！")
          } else if (record.aa == 3) {
            message.error("该请求已被拒绝，请重新发起！！！")
          }
        }, identification: 0
      },
    ];

    /// 分页参数
    const pagination = {
      pageNum: 1,
      pageSize: 10,
    }

    /// 外置参数 - 当参数改变时, 重新触发 fetch 函数
    const state = reactive({
      param: {},
      visibleApply: false,
      visibleReturn: false,
      recordApply: {},
      recordReturn: {},
    })

    const searchParam = [
      {key: "name", type: "input", label: "任务名称"},
      {key: "code", type: "input", label: "运行目标"},
    ]

    const search = function (value) {
      state.param = value
    }

    const closeApply = function () {
      tableRef.value.reload();
      state.visibleApply = false
    }
    const closeReturn = function () {
      tableRef.value.reload();
      state.visibleReturn = false
    }


    return {
      state, // 状态共享
      fetch, // 数据回调
      columns, // 列配置
      operate, // 行操作
      pagination, // 分页配置
      tableRef,

      search,
      searchParam, // 查询参数

      closeApply,
      closeReturn,


    };
  },
};
</script>
